<template>
	<view class="page">
		<uni-nav-bar :statusBar="true" :leftWidth="200">
			<view slot="left" class="logo-tittle">
				<image style="width: 50rpx; height: 50rpx; border-radius: 50%;" mode="aspectFill" src="/static/image/logo.png"></image>
				<text>极律选车</text>
			</view>
		</uni-nav-bar>
		<scroll-view
			scroll-y="true"
			class="scroll-list"
			:scroll-into-view="toView"
			@scroll="scrollView"
			>
			<view class="tab">
				<view class="item" v-for ="item in recomList " :key="item.hid" @click="jumpBrandList(item.hid, item.name)">
					<image :src="item.logo"></image>
					<view class="text">{{item.name}}</view>
				</view>
			</view>
			<block v-for="(item,index) in abcList" :key="index+item" >
				<view class="left">
					<view :id="item">
						<view class="zimu">{{item}}</view>
						<view class="brand-line" v-for="val in brandList[index].list" :key="val.hid" @click="jumpBrandList(val.hid, val.name)">
							<block>
								<image :src="val.logo"></image>
							</block>
							<view class="name">{{val.name}}</view>
						</view>
					</view>
				</view>
			</block>
		</scroll-view>
		
		<view  class="right-navi-container">
			<view :class="toView == item?'active' : 'right-navi-item'"  v-for="item in abcList" :key="item" @click="toSelectIndex(item)" >
			{{item}}
				
			</view>
		</view>
	</view>
</template>

<script>
	import { debounce } from '../../utils/util.js';

	const Api = require('../../utils/api.js');
	const request = require('../../utils/request.js');
	
	export default {
		data() {
			return {
				recomList: [],
				brandList: [],
				abcList: [],
				highlight: 'A',
				toView: 'A',
			}
		},
		onLoad(){
			this.getList()
		},
		methods: {
			getList () {
				request.http(
				{
					url: Api.brand_five,
					type: 'GET',
					header: {
						"app-source": 2,
						"applet-num": 2,
						// // 'content-type': 'application/x-www-form-urlencoded',
						// 'token':uni.getStorageSync('token')
					},
					data: {},
					}).then(result=>{
						this.recomList = result.data.list
					})
					request.http(
					{
						url: Api.brand_list,
						type: 'GET',
						header: {
							// // 'content-type': 'application/x-www-form-urlencoded',
							// 'token':uni.getStorageSync('token')
						},
						data: {},
						}).then(result=>{
							this.brandList = result.data.list
							
						})
						
						request.http(
						{
							url: Api.abc_list,
							type: 'GET',
							header: {
								// // 'content-type': 'application/x-www-form-urlencoded',
								// 'token':uni.getStorageSync('token')
							},
							data: {},
							}).then(result=>{
								this.abcList = result.data.list
								
							})
			},
			toSelectIndex(val) {
				this.toView = val;
			},
			
			scrollView(event) {
				 this.abcList.map(item => {
					uni.createSelectorQuery().select(`#${item}`).boundingClientRect((rect) => {
						if(-rect.top <= rect.height && (rect.bottom - 95)>=0 && rect.bottom <= (rect.height + 95)){
							this.toView = rect.id
						}
					}).exec()
				})
			},
			
			jumpBrandList(hid, hname) {
				uni.navigateTo({
					url:`/pages/home/brand?brand_hid=${hid}&brand_name=${hname}`
				})
			}
			
		}
	}
	
</script>

<style lang="scss" scoped>
	.page {
		overflow: hidden;
		// .logo-tittle {
		// 	display: flex;
		// 	align-items: center;
		// 	gap: 3px;
		// 	font-size: 32rpx;
		// }
		.scroll-list {
			height: 100vh;
			.tab {
				height: 200rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #fff;
				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 0 33rpx;
					box-sizing: border-box;
					image {
						width: 72rpx;
						height: 72rpx;
					}
					.text {
						font-size: 24rpx;
						font-weight: 400;
						color: #222526;
					}
				}
			}
			
			.left {
				background: #fff;
				.zimu {
					width: 100%;
					position: sticky;
					top: 0;
					z-index: 10;
					background: #F6F7FC;;
					height:43rpx;
					padding-left: 32rpx;
					line-height: 43rpx;
					margin-bottom: 15rpx;
					font-size: 25rpx;
					font-weight: 600;
					color: #222526;
				}
				.brand-line {
					display: flex;
					padding: 20rpx 32rpx;
					box-sizing: border-box;
					align-items: center;
					image {
						width: 72rpx;
						height: 72rpx;
						margin-right: 29rpx;
					}
					.name {
						font-size: 31rpx;
						font-weight: 400;
						color: #222526;
					}
				}
			}
		}
		
		.right-navi-container{
		  display: flex;
		  flex-direction: column;
		  position: fixed;
		  right: 15rpx;
		  top: 50%;
		  transform: translateY(-50%);
		  z-index: 999;
		}
		.right-navi-item{
		  position: relative;
		  font-size: 22rpx;
		  font-weight: 400;
		  color:#6E7175;
		  line-height: 34rpx;
		}
	
		.active {
			margin-left: -10rpx;
			font-size: 22rpx;
			width: 32rpx;
			height: 32rpx;
			line-height: 32rpx;
			text-align: center;
			background: #222526;
			border-radius: 50%;
			color: #fff;
		}
	}
</style>